<template>
    <div class="user">
        <div class="clearfix text-r border-b-eded height-24 line-height-19 pl-20 pr-20">
            <a-button size="small" type="primary" icon="plus" class="pull-left mt-5" @click="addUser({},0)"></a-button>
            <a-button size="small" type="primary" icon="reload" class="mr-10" @click="tableReload"></a-button>
        </div>
        <div>
            <p-remote-vxe-table
                    ref="remoteTable"
                    :data-fun="dataFun"
                    @afterLoad="afterLoad"
                    @afterLoadErr="afterLoadErr"
                    :params="params">
                <template slot-scope="{tablePage, data, loading, handlePageChange, sortChangeEvent}" :params="params">
                    <vxe-grid
                            border
                            resizable
                            auto-resize
                            sync-resize
                            size="mini"
                            :height="tableHeight"
                            :loading="loading"
                            :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
                            :pager-config="tablePage"
                            :columns="columns"
                            :sortConfig="{
                                remote: true,
                                trigger: 'cell',
                            }"
                            highlight-hover-row
                            highlight-current-row
                            highlight-hover-column
                            highlight-current-column
                            @sort-change="sortChangeEvent"
                            @page-change="handlePageChange"
                            :data="data">
                        <template v-slot:action="{row}">
                            <div class="clearfix">
                                <a-button size="small" type="primary" icon="edit" class="pull-left mb-10 mr-10" @click="addUser(row,1)"></a-button>
                                <a-button size="small" type="danger" icon="delete" class="pull-left" @click="delUser(row)"></a-button>
                            </div>
                        </template>
                    </vxe-grid>
                </template>
            </p-remote-vxe-table>
        </div>
        <add-user ref="addUser" @done="tableReload"></add-user>
    </div>
</template>

<script>
    let defaultColumns = [
        { type: 'seq', fixed: 'left', title: '序号', width: 60, noColumnsSet: true, resizable: false },
        { title: '用户编码', minWidth: 150, align: 'center',field: 'userCode' },
        { title: '用户名称', minWidth: 150, align: 'center',field: 'realName' },
        { title: '联系方式', minWidth: 150, align: 'center',field: 'phone' },
        { title: '联系地址', minWidth: 150, align: 'center',field: 'address' },
        { title: '用户类型', minWidth: 150, align: 'center',field: 'userType' },
        { title: '创建时间', minWidth: 150, align: 'center',field: 'createdTime' },
        { title: '备注', minWidth: 150, align: 'center',field: 'remark' },
        { title: '操作', minWidth: 150, align: 'left', fixed: 'right', resizable: false, noColumnsSet: true, slots: { default: 'action'},},
    ];
    import addUser from './add';
    export default {
        components: {
            addUser
        },
        data () {
            return {
                params: {
                    pageNum: 1,
                    pageSize: 20,
                    keywords: ''
                },
                dataFun: this.$api.permission.listbyuserinfo,
                columns: JSON.parse(JSON.stringify(defaultColumns)),
            };
        },
        methods: {
            afterLoad () {
                this.loadingSearch = false;
                this.autoResetTableHeight();
            },
            afterLoadErr () {
                this.loadingSearch = false;
                this.autoResetTableHeight();
            },
            tableReload() {
                this.$refs['remoteTable'].reload(this.params);
            },
            addUser (data,num) {
                if (num === 1) {
                    console.log(1);
                }
                let tipMsg = num === 0 ? '新增用户' : '编辑角色';
                this.$refs.addUser.show(data,tipMsg,num);
            },
            delUser (data) {
                let _this = this;
                _this.$confirm({
                    title: '用户删除',
                    content: '是否确定删除该用户',
                    okText: '是',
                    okType: 'danger',
                    cancelText: '否',
                    onOk() {
                        _this.delUserApi({id: data.id});
                    },
                });
            },
            delUserApi (data) {
                this.$api.permission.deleteuserinfo(data).then(res => {
                    if (res && res.code !== 200) {
                        this.$message.error(res.errorMsg);
                        return;
                    }
                    this.$message.success('删除成功');
                    this.tableReload();
                }).catch(err => {
                    this.$message.error(err.errorMsg);
                });
            },
        }
    };
</script>

<style scoped lang="scss">

</style>
